<template>
  <div class="boxone" v-for="(item, index) in list" key="index">
    <div class="img">
      <img src="https://u.miaoshoucdn.com/avatar/003/64/27/003642720_mid.jpg" alt="" />
    </div>
    <div class="detail">
      <div class="nameone">
        <p>
          <b style="font-size: 0.36rem">{{ item.doctorname }}</b> {{ item.doctorstate }}
        </p>
        <span>东莞市第八人民医院(东莞... 妇科</span>
      </div>
      <div class="nametwo">
        <van-tag color="#e7f0ff" text-color="#1e6fff" size="large">图文咨询</van-tag>
        <van-tag color="#e4f7f2" text-color="#01b488" size="large">电话咨询</van-tag>
      </div>
      <div class="namethree">
        {{ item.doctordescword }}
        <span class="arrow-btn" @click="btn">
          <van-icon name="arrow-down" />
        </span>
      </div>
      <div class="namefour">
        <ul>
          <li>
            好评率 <span class="namecolor">{{ item.doctorgood }}%</span>
            <span class="nameicon">|</span>锦旗<span class="namecolor">{{
              item.doctortime
            }}</span
            ><span class="nameicon">|</span>浏览人次<span class="namecolor">{{
              item.doctorbrowse
            }}</span>
          </li>
        </ul>
      </div>
      <div class="namefive">
        <span class="fiveone"
          >￥<b>{{ item.doctorprice }}</b> <span>起</span>
        </span>
        <span class="fivetwo" style="margin-right: 0.2rem"
          ><van-button
            style="height: 0.65rem; border-radius: 0.2rem; background: #1e6fff"
            type="primary"
            @click="clickBtn(item)"
            >问医生</van-button
          ></span
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { doctorPictures } from '../../api/index'
import { useRouter } from 'vue-router';
let doctorbrowse=ref()
const router = useRouter();
const clickBtn = (item) => {
  console.log(item);
  router.push({path:`/wys`,
    query: item
  });
  doctorbrowse=item.doctorbrowse++
  localStorage.setItem("doctorbrowse", JSON.stringify(item.doctorbrowse++));
};
//当我点击arrow-btn时，namethree的overflow属性从hidden变为auto
//当我再次点击arrow-btn时，namethree的overflow属性从auto变为hidden
const btn = () => {
    const namethree = document.querySelector('.namethree') as HTMLElement;
    namethree.style.height = namethree.style.height === '1.1rem' ? '0.55rem' : '1.1rem';
    const arrow = document.querySelector('.arrow-btn') as HTMLElement;
    arrow.style.top = arrow.style.top === '0.8rem' ? '0.25rem' : '0.8rem';
    arrow.style.transform = arrow.style.transform === 'rotate(180deg)' ? 'rotate(0deg)' : 'rotate(180deg)';
}
//定义数据类型
interface DoctorData {
    doctorname: string;
    doctorstate: string;
    doctordescword: string;
    doctorgood: number;
    doctortime: number;
    doctorbrowse: number;
    doctorprice: number;
}

const list = ref<DoctorData[]>([])//定义一个数组，用来存储接口返回的数据
const doctordata = async () => {
    //调用接口
    await doctorPictures().then((res) => {
        list.value = res.data.data.slice(0, 2)//截取数组的前两条数据
    }).catch((error) => {
        // 处理 AxiosError
        console.error("Axios请求出错:", error);
    });
}
doctordata()
</script>

<style scoped>
* {
  font-size: 0.27rem;
}

.boxone {
  float: left;
  width: 100%;
  background: #fff;
  /* background: red; */
  padding: 0.3rem 0 0 0;
  border-bottom: 1px solid #d3d3d3;
  border-radius: 10px;
}

.img {
  float: left;
  width: 1.5rem;
  height: 100%;
  /* background: green; */
  text-align: center;

  img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    /* margin-top: 0.4rem; */
  }
}

.detail {
  float: left;
  width: calc(100% - 1.5rem);
  /* height: 4rem; */
  /* background: green; */
}

.nameone {
  height: 1rem;

  /* background: red; */
  p {
    height: 0.25rem;
  }
}

.nametwo {
  height: 0.5rem;

  /* background: red; */
  .van-tag {
    margin-right: 0.1rem;
    font-size: 0.25rem;
  }
}

.namethree {
  height: 0.53rem;
  width: 95%;
  /* background: rgb(168, 168, 248); */
  color: #666666;
  font-size: 0.25rem;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  width: 0.7rem;
  text-align: center;
  position: absolute;
  font-size: 0.3rem;
  background: linear-gradient(to right, rgb(240, 240, 240), rgb(255, 255, 255));
  top: 0.25rem;
  right: 0.05rem;
}

.namefour {
  height: 0.5rem;
  /* background: rgb(69, 172, 231); */

  li {
    color: #666666;
    line-height: 0.5rem;
    font-size: 0.25rem;
  }

  .namecolor {
    color: #ff6600;
    font-size: 0.25rem;
    margin: 0 0.01rem;
  }

  .nameicon {
    color: #e0e0e0;
    font-size: 0.2rem;
    margin: 0 0.2rem;
  }
}

.namefive {
  margin-bottom: 0.3rem;
  height: 0.7rem;
  /* background: rgb(64, 75, 138); */
  line-height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .fiveone {
    font-size: 0.25rem;
    color: #ff6600;

    b {
      font-size: 0.4rem;
      font-weight: 900;
    }

    span {
      color: #d3d3d3;
      font-size: 0.25rem;
    }
  }
}
</style>
